Page({
  data: {
    tabs: [{
        id: 0,
        value: "体验问题",
        isActive: true
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }
    ],
    // 图片地址
    imgList: [],
    // 文本域的内容
    textValue: ''
  },
  // 外网的图片路径数组
  UploadImgs: [],
  // 改变标题类名
  bindtabsItemChange(e) {
    const {
      index
    } = e.detail
    const {
      tabs
    } = this.data
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
    this.setData({
      tabs
    })
  },
  // 点击 “+” 选择图片
  handleChooseImg(e) {
    // 1.调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片数量
      count: 9,
      // 图片的格式：原图       压缩
      sizeType: ['original', 'compressed'],
      // 图片的来源：  相册    照相机
      sourceType: ['album', 'camera'],
      success: (result) => {
        this.setData({
          // 图片数组 进行拼接
          imgList: [...this.data.imgList, ...result.tempFilePaths]
        })
      }
    })
  },
  // 删除图标的单击事件
  handleRemoveImg(e) {
    console.log(e);
    // 获取被点击的组件的索引
    const {
      index
    } = e.currentTarget.dataset
    // 获取data中的图片数组
    let {
      imgList
    } = this.data
    // 删除元素
    imgList.splice(index, 1)
    // 重新获取新数据
    this.setData({
      imgList
    })
  },
  // 文本域的输入事件
  handleTextInput(e) {
    this.setData({
      textValue: e.detail.value
    })
  },
  // 提交按钮的回调
  handleFormSubmit() {
    // 1.获取文本域的内容  图片数组
    const {
      textValue,
      imgList
    } = this.data
    // 2.合法性的验证
    if (!textValue.trim()) {
      // 不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      })
      return
    }
    // 3.准备上传图片  到专门的图片服务器
    // 上传文件的api不支持多个文件同时上传  遍历数组  挨个上传
    // 显示正在上传中
    wx.showLoading({
      title: "正在上传中",
      mask: true
    })

    // 判断有没有需要上传的图片数组
    if (imgList.length != 0) {
      imgList.forEach((v, i) => {
        wx.uploadFile({
          // 被上传的文件的路径
          filePath: v,
          // 上传文件的名称  后台来获取数据  file
          name: 'image',
          // 图片要上传的地址
          url: 'https://img.coolcr.cn/api/upload',
          // 顺带文本信息
          formData: {},
          success: (result) => {
            // console.log(result);
            let url = JSON.parse(result.data).data.url
            this.UploadImgs.push(url)
            // console.log(this.UploadImgs);

            // 所有的图片上传完毕了才触发
            if (i === imgList.length - 1) {
              // 弹窗关闭
              wx.hideLoading()
              console.log("把文本域和外网图片数组  提交到后台中");
              // 重置页面
              this.setData({
                textValue: '',
                imgList: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1,
              })
            }
          }
        })
      })
    }else{
      wx.hideLoading()
      console.log("只是提交了文本");
      wx.navigateBack({
        delta: 1,
      })
    }

  }
})